<template>
    <div class="management-outliers">
        <div class="exception-top">
            <a-form-model layout="inline" :model="page" :colon="false" style="width:50%">
                        <a-form-model-item label="警告类型">
                            <a-tree-select v-model="page.warningTypeId" :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" style="width:180px" :tree-data="treeData" placeholder="请选择警告类型" :replaceFields="{title: 'name',value: 'id',children: 'waringTypePoList',}" allow-clear>
                                <a-icon slot="suffixIcon" type="caret-down" />
                            </a-tree-select>
                        </a-form-model-item>
                        <a-form-model-item>
                            <a-button type="primary" @click="selectFn">搜索</a-button>
                        </a-form-model-item>
            </a-form-model>
            <a-button type="primary" @click="()=>{title = '添加警告值';addPop =true;}">添加</a-button>
        </div>
        <div class="exception-content">
            <my-table :data-source="tableData" :pagination="false" :rowKey="record=> record.id">
                <a-table-column title="序号" align="center" :ellipsis="true" :customRender="(text, record, index) =>(page.current - 1) * page.size + index + 1"/>
                <a-table-column title="警告类型" data-index="name" align="center" :ellipsis="true" />
                <a-table-column title="警告级别" data-index="warningType" align="center" :ellipsis="true" />
                <a-table-column title="最大值" data-index="maxValue" align="center" :ellipsis="true" />
                <a-table-column title="最小值" data-index="minValue" align="center" :ellipsis="true" />
                <a-table-column title="默认选择数据" data-index="isDefault" align="center">
                    <template slot-scope="isDefault">
                        <a-switch default-checked :checked="isDefault" />
                    </template>
                </a-table-column>
                <!-- <a-table-column title="操作" align="center" width="200px">
                    <template slot-scope="text,record">
                        <div class="handle">
                            <a-button type="warning" @click="editFn(record)">修改</a-button>
                            <a-button type="danger" @click="delFn(record.id)">删除</a-button>
                        </div>
                    </template>
                </a-table-column> -->
            </my-table>
        </div>
        <div class="exception-bottom clearfix">
            <div class="page-box">
                <a-pagination :show-total="total => `共 ${total} 条记录`" v-model="page.current" :total="total" :defaultPageSize="page.size" hideOnSinglePage :item-render="itemRender" @change="pagechangeFn" />
            </div>
        </div>
        <!-- 添加弹框 -->
        <a-modal v-model="addPop" width="50%" :title="title" centered @cancel="()=>form = {}" :maskClosable="false" destroyOnClose>
            <a-form-model ref="formrules" :rules="formrules" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" :colon="false">
                <a-form-model-item label="异常警告类型" prop="waringTypeId">
                    <a-tree-select v-model="form.waringTypeId" :dropdown-style="{ maxHeight: '200px', overflow: 'auto' }" :tree-data="treeData1" :defaultValue="form.waringTypeId" placeholder="请选择异常警告类型" :replaceFields="replaceFields"></a-tree-select>
                </a-form-model-item>
                <a-form-model-item label="警告级别" prop="warningType">
                    <a-select v-model="form.warningType" placeholder="请选择警告级别">
                        <a-select-option value="一级警告">一级警告</a-select-option>
                        <a-select-option value="二级警告">二级警告</a-select-option>
                    </a-select>
                </a-form-model-item>
                <a-form-model-item label="最大值" prop="maxValue">
                    <a-input v-model="form.maxValue" />
                </a-form-model-item>
                <a-form-model-item label="最小值" prop="minValue">
                    <a-input v-model="form.minValue" />
                </a-form-model-item>
                <a-form-model-item label="是否默认选择数据" prop="isDefault">
                    <a-switch v-model="form.isDefault" />
                </a-form-model-item>
                <a-form-model-item label="备注" prop="note">
                    <a-input v-model="form.note" type="textarea" />
                </a-form-model-item>
            </a-form-model>

            <template slot="footer">
                <a-button type="primary" @click="SubmitFn">确定</a-button>
            </template>
        </a-modal>
    </div>
</template>

<script>
import util from "@/libs/util.js"
export default {
    name: "outliers",
    data() {
        return {
            labelCol: { span: 4 },
            wrapperCol: { span: 16 },
            replaceFields: {
                // 树形字段改变
                title: "name",
                value: "id",
                children: "waringTypePoList",
            },
            treeData: [],
            treeData1: [],
            title: "",
            addPop: false,
            page: {
                current: 1,
                size: 10,
                warningTypeId: undefined,
            },
            total: 0,
            tableData: [], // 表格数据
            // 表单验证
            formrules: {
                waringTypeId: [
                    {
                        required: true,
                        message: "警告类型必填",
                        trigger: "blur",
                    },
                ],
                maxValue: [
                    { required: true, message: "警告值必填", trigger: "blur" },
                ],
                minValue: [
                    { required: true, message: "警告值必填", trigger: "blur" },
                ],
            },
            form: {
                // 弹窗添加表单数据
                warningType: "",
                waringTypeId: "",
                maxValue: "",
                minValue: "",
                isDefault: true,
                note: "",
            },
        };
    },
    methods: {
        selectFn() {
            // 搜索按钮
            console.log(this.page);
            this.page.current = 1;
            this.getdata();
        },
        editFn(data) {
            console.log(data);
            this.title = "修改警告类型值";
            this.form = data;
            this.addPop = true;
        },
        delFn(id) {
            let _that = this;
            this.$confirm({
                title: "是否确认删除",
                onOk() {
                    _that.$api.Delabnormalremove(id).then((res) => {
                        if (res.data.data == true) {
                            _that.$message.info("数据删除成功!");
                            _that.getdata();
                        } else {
                            _that.$message.info(res.data.errorMessage);
                        }
                    });
                },
                onCancel() {
                    console.log("Cancel");
                },
                class: "delk",
            });
        },
        SubmitFn() {
            // 弹窗提交按钮
            this.$refs.formrules.validate((valid) => {
                if (valid) {
                    if (this.title == "添加警告值") {
                        this.$api.Postabnormalsave(this.form).then((res) => {
                          console.log(res)
                            if (res.data.code == 0) {
                                this.$message.info("添加成功!");
                                this.addPop = false;
                                this.form = {};
                                this.getdata();
                            }
                        });
                    } else {
                        this.$api.Putabnormaledit(this.form).then((res) => {
                            if (res.status == 200) {
                                this.addPop = false;
                                this.$message.info("修改成功!");
                                this.form = {};
                                this.getdata();
                            }
                        });
                    }
                }
            });
        },
        // 分页方法
        itemRender(current, type, originalElement) {
            if (type === "prev") {
                return <a>上一页</a>;
            } else if (type === "next") {
                return <a>下一页</a>;
            }
            return originalElement;
        },
        pagechangeFn(page) {
            this.page.current = page;
            this.getdata();
        },
        // 数据获取方法
        getTreeData() {
            // 获取树形结构
            this.$api.GetfindByTree().then((res) => {
                if (res.data.code == 0) {
                    this.treeData = [];
                    this.treeData = JSON.parse(JSON.stringify(res.data.data));
                    this.treeData1 = util.recursion(res.data.data);
                    console.log(util.recursion(this.treeData1))
                }
            });
        },
        getdata() {
            this.$api.PostabnormalfindByPage(this.page).then((res) => {
                if (res.data.code == 0) {
                    this.tableData = res.data.data;
                    this.total = res.data.total;
                }
            });
        },
    },
    mounted() {
        this.getdata();
        this.getTreeData();
    },
};
</script>

<style lang="scss" scoped>
.management-outliers {
    width: 100%;
    height: 100%;
    padding: 1%;
    box-sizing: border-box;
    .exception-top {
        width: 100%;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .exception-content {
        width: 100%;
        height: calc(94% - 60px);
        .handle{
            display: flex;
            justify-content: space-around;
        }
    }
    .exception-bottom {
        width: 100%;
        .page-box {
            float: right;
        }
    }
}

</style>
